<!--
/**
* Author: linchun
* Date: 2022-08-02 14:50
* Desc: FilmInfo 影院影片相关信息
*/
-->
<template>
  <view>
    <!-- 影片信息 -->
    <view class="film-info tbr18">
      <view class="flex flex-m">
        <!-- #ifdef MP-WEIXIN || H5|| MP-TOUTIAO -->
        <zm-image class="movie-img" :src="info.cover" :radius="'12rpx'" :lazy-load="false" custom-style="width:141rpx;height:190rpx;margin-right:18rpx;"></zm-image>
        <!-- #endif -->
        <!-- #ifdef MP-ALIPAY -->
        <zm-image custom-class="movie-img" :src="info.cover" :radius="'12rpx'" custom-style="width:141rpx;height:190rpx;margin-right:18rpx;"></zm-image>
        <!-- #endif -->
        <view class="flex flex-col flex-c flex-1 payTime">
          <view class="mb20 flex-s-m" v-if="showTime">
            <image class="icon-countDown" style="w" mode="aspectFit" :src="'https://public-oss-file.zmaxfilm.com/applet/img/film-oxygen-uniapp/icon-countDown.png'"></image>
            <view class="tip flex-s-m">
              <text> 请在 </text>
              <yy-count-down class="movie-count-down" :time="info.autoTime" :format="'mm:ss'" @complete="timeComplete" @timeChange="onCountDownChange">
                <view class="flex-s-m fc-white">
                  <text class="time__minutes">{{ timeData.minutes }}</text>
                  <text class="time__doc">:</text>
                  <text class="time__seconds">{{ timeData.seconds }}</text>
                </view>
              </yy-count-down>
              <text> 内完成付款 </text>
            </view>
          </view>
          <view class="flex-b flex-m mb20 pt25">
            <view class="movie-name flex-1">{{ info.filmName }}</view>
            <view>{{ seatLen }}张</view>
          </view>
          <view class="lang fs24 flex-s-m">
            <view name="dateweek"> {{ $utils.getDateWeek(info.sDate) }} </view>
            <view name="time" v-if="info.sTime">
              {{ info.sTime + '~' + info.eTime }}
            </view>
            <view name="desc" v-if="info.copyLanguage || info.copyType"> ({{ info.copyLanguage + info.copyType }}) </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 分割线 -->
    <view class="image-divider">
      <zm-image
        :src="'https://public-oss-file.zmaxfilm.com/applet/img/film-oxygen-uniapp/divider.png'"
        :lazy-load="false"
        @load="handleLoad"
        mode="scaleToFill"
        custom-style="width:100%;height:46rpx;position:absolute;top:-2rpx;bottom:-2rpx;left:0;right:0"
      ></zm-image>
      <view class="zhanwei" v-if="!loadFinish" />
    </view>
    <!-- 影院信息 -->
    <view class="film-info flex-col flex-c-m">
      <view class="movie-item cinema" v-if="info.cinemaName">
        {{ info.cinemaName }}
      </view>
      <view class="movie-item screens" v-if="info.hallName">
        {{ info.hallName }}
      </view>
      <view class="movie-item address">{{ cinemaInfo.state || '' }} </view>
      <view class="seat-list flex-s-m flex-w" v-if="seatLen">
        <view class="seat-item" :class="{ mr0: (index + 1) % 4 === 0 }" v-for="(item, index) in info.seatDescribeArr" :key="index">
          {{ item }}
        </view>
      </view>
    </view>
    <!-- 附加 提示 -->
    <!-- <zm-image
      src="/attach-tip-bg.png"
      is-join
      custom-style="width:100%;height:59rpx"
    ></zm-image> -->
    <view class="attach-tip flex-c-m">
      <view class="tip-item flex-s-m mr50">
        <zm-image src="/icon-warn-tip.png" is-join custom-style="width:26rpx;height:26rpx"></zm-image>
        <text class="name"> 不支持退票 </text>
      </view>
      <view class="tip-item flex-s-m">
        <zm-image src="/icon-warn-tip.png" is-join custom-style="width:26rpx;height:26rpx"></zm-image>
        <text class="name"> 不支持改签 </text>
      </view>
    </view>
  </view>
</template>

<script>
  import ZmImage from '@/commons/ZmImage'
  export default {
    props: {
      info: {
        type: Object,
        default() {
          return {
            seatDescribeArr: []
          }
        }
      }
    },
    components: {
      ZmImage
    },
    data() {
      return {
        timeData: {},
        loadFinish: false
      }
    },
    mounted() {},
    computed: {
      // 展示倒计时时间
      showTime() {
        const autoTime = this.$utils.isNaNStr(this.info.autoTime)
        console.log(autoTime)
        // showStatus 0 => '待支付', 1 => '待出票', 2 => '未放映', 3 => '已放映', 4 => '购票失败', 5 => '已退票',，6=>'已取消'
        return this.info.showStatus === '0' && autoTime >= 0
      },
      cinemaInfo() {
        return this.info.cinemaInfo || {}
      },
      seatLen() {
        return this?.info.seatDescribeArr?.length || 0
      }
    },
    methods: {
      // 倒计时完成
      timeComplete() {
        this.$emit('timeComplete')
      },
      onCountDownChange(e) {
        this.timeData = e
        this.timeData.minutes = e.minutes < 10 ? '0' + e.minutes : e.minutes
        this.timeData.seconds = e.seconds < 10 ? '0' + e.seconds : e.seconds
      },
      handleLoad(flag) {
        this.loadFinish = flag
      }
    }
  }
</script>

<style lang="scss" scoped>
  .film-info {
    padding: 0 20rpx;
    padding-bottom: 0rpx !important;
    background: #fff;
    .movie-name {
      font-size: 34rpx;
      color: #333;
      font-weight: 600;
    }
    .lang {
      font-size: 24rpx;
      font-weight: 400;
      color: #333333;
    }
    //#ifdef MP-WEIXIN || H5 || MP-TOUTIAO
    .movie-img,
    .payTime {
      margin-top: -69rpx;
      .icon-countDown {
        width: 40rpx;
        height: 40rpx;
        margin-right: 18rpx;
      }
      .tip {
        font-size: 28rpx;
        color: #fff;
      }
    }
    //#endif
    //#ifdef MP-ALIPAY
    /deep/.movie-img,
    .payTime {
      margin-top: -69rpx;
      .icon-countDown {
        width: 40rpx;
        height: 40rpx;
        margin-right: 18rpx;
      }
      .tip {
        font-size: 28rpx;
        color: #fff;
      }
    }
    //#endif
    .movie-item {
      font-size: 24rpx;
      color: #333333;
      // margin-bottom: 20rpx;
      line-height: 42rpx;
    }
    .seat-list {
      margin-top: 20rpx;
      width: 100%;
      .seat-item {
        width: 156rpx;
        height: 50rpx;
        line-height: 50rpx;
        text-align: center;
        background: linear-gradient(135deg, #55baff 0%, #23e6d8 100%);
        border-radius: 6rpx;
        margin-right: 15rpx;
        font-size: 24rpx;
        color: #ffffff;
        margin-bottom: 14rpx;
      }
    }
  }
  .attach-tip {
    width: 100%;
    height: 59rpx;
    background: #fff4de;
    border-radius: 0 0 20rpx 20rpx;
    .tip-item {
      font-size: 24rpx;
      color: #333333;
      .name {
        margin-left: 7rpx;
      }
    }
  }
  .image-divider {
    position: relative;
    height: 40rpx;
    background: linear-gradient(90deg, #4fd2cd 0%, #42c7ff 100%);
    .zhanwei {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 40rpx;
      background: #fff;
    }
  }
</style>
